<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="变更手机"></el-navbar>
		
		<view class="the-form">
			
			<form @submit="formSubmit">
				
				<view class="form-item">
					<view class="form-item-body form-item-border">
						<view class="form-item-icon">
							手机号
						</view>
						<view class="form-item-input">
							<input type="text" name="username" @input="onMobile" placeholder="手机号" placeholder-class="form-item-placeholder" />
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body form-item-border">
						<view class="form-item-icon">
							<text>验证码</text>
						</view>
						<view class="form-item-input">
							<input type="text" name="code" placeholder="请输入验证码" maxlength="6" placeholder-class="form-item-placeholder" />
						</view>
						<view class="form-item-right">
							<view @click="onSendSms">
								<el-code v-model="isSendSms" ref="codeRef" color="#4173ff" activeColor="#666" fontSize="26rpx"></el-code>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body">
						<button class="form-item-button" :class="{ 'active': isFormActive == true }" form-type="submit">确 定</button>
					</view>
				</view>
				
			</form>
			
		</view>
		
	</el-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { useAppStore } from "@/store/app";
	import { useUserStore } from "@/store/user";
	import { inArray,isMobile } from "@/el-ui/libs/check";
	
	const userStore = useUserStore();
	const appStore  = useAppStore().getApp();
	const codeRef   = ref(null);
	const isSendSms = ref(true);
	let mobile      = ref('');
	
	const onSendSms = ()=>{
		if(!isSendSms.value){
			return false;
		}
		
		codeRef.value?.start();
		sendSms();
	}
	
	const onMobile = (ev)=>{
		mobile.value = ev.detail.value;
	}
	
	let isCode = ref(false);
	const sendSms = ()=>{
		if(mobile.value.length <= 0){
			uni.$layer.showToast("请输入手机号");
			return ;
		}else if(!isMobile(mobile.value)){
			uni.$layer.showToast("您填写的手机号不正确");
			return ;
		}
		
		uni.$http.post("sms/send",{ scene: "change", mobile: mobile.value }).then(res=>{
			if(!res.code){
				uni.$layer.showToast(res.msg);
				codeRef.value?.stop();
			}else{
				isCode.value = true;
			}
		});
	}
	
	let isFormActive = ref(false);
	const formSubmit = (ev)=>{
		if(isFormActive.value) return false;
		if(isCode.value === false){
			uni.$layer.showToast("请发送验证码");
			return false;
		}
		
		let data = ev.detail.value;
		if(data.username.length <= 0){
			uni.$layer.showToast("请输入手机号");
			return false;
		}else if(!isMobile(data.username)){
			uni.$layer.showToast("您输入的手机号码不合法");
			return false;
		}else if(data.code.length <= 0){
			uni.$layer.showToast("请输入验证码");
			return false;
		}
		
		isFormActive.value = true;
		uni.$http.post("user/change",data).then(res=>{
			if(res.code){
				uni.$layer.showToast(res.msg);
				navigateTo("pages/index/ucenter",3);
			}else{
				uni.$layer.showToast(res.msg);
				isFormActive.value = false;
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	page { background-color: #fff; }
	
	.the-form {
		width: 100%;
		margin-top: 60rpx;
		.oauth-box {
			width: 100%;
			margin-top: 50rpx;
			.oauth-list{
				display: flex;
				justify-content: center;
				margin-top: 40rpx;
				.oauth {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					&.weixin {
						background-color: #41b035;
					}
				}
			}
		}
		
		.form-item {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			.form-item-body{
				display: flex;
				flex-direction: row;
				padding: 35rpx 0;
				color: #555;
				box-sizing: border-box;
				position: relative;
				&.form-item-border::after {
					content: " ";
					position: absolute;
					left: 0;
					top: 0;
					pointer-events: none;
					box-sizing: border-box;
					transform-origin: 0 0;
					width: 199.8%;
					height: 199.7%;
					transform: scale(0.5, 0.5);
					border-bottom: 1px solid #e5e5e5;
					z-index: 2;
				}
				
				.form-item-icon {
					margin-right: 15rpx;
					display: inline-flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
				}
				
				.form-item-placeholder {
					color: #9fa3ab;
					font-size: 30rpx;
				}
				
				.form-item-input {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: row;
					padding: 0px;
					border-color: rgb(220, 223, 230);
					width: 90%;
					input {
						color: #333;
						font-size: 30rpx;
						width: 100%;
					}
				}
				
				.form-item-right {
					color: #888;
					font-size: 26rpx;
					padding-left: 30rpx;
					padding-right: 10rpx;
					position: relative;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					&::before {
						position: absolute;
						content: " ";
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 16px;
						background-color: #dcd5d5;
					}
				}
				
				.form-item-button {
					width: 100%;
					color: #ffffff;
					border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					height: 40px;
					line-height: 40px;
					border-radius: 35rpx;
					font-size: 32rpx;
					&.active {
						background-color: #ccc;
						color: #fff;
						border-color: #ccc;
					}
				}
				
				.form-item-text {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					.agreement-box {
						padding-left: 10rpx;
					}
					text {
						color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					}
				}
				
				.form-item-login-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
</style>